figure.Tank = new Class({
    Extends: figure.DomFigure,

    initialize: function(id, css, type) {
        this.parent(id);
        this._parseType(type);
        this.createElement('canvas',{
            id: id,
            Width: this.sizes.WIDTH*2 + 20,
            Height: this.sizes.HEIGHT_TOTAL*2,
            css: css
        });
        this.element = this.getElement();
        this.type = type;
        this.writeTag(css.top + 1.2 * (type == "fermentacion" ? figure.tankFermSizes.HEIGHT_TOTAL : figure.tankMadurSizes.HEIGHT_TOTAL), css.left + (type == "fermentacion" ? figure.tankFermSizes.WIDTH : figure.tankMadurSizes.WIDTH))
    },

    draw: function() {
        var y;
        var x = y = this.sizes.WIDTH / 2 + 1;
        var context = this.element[0].getContext('2d');
        context.fillStyle = this._createGradient(context);
        // cupula
        context.beginPath();
        context.arc(this.sizes.OFFSET + this.sizes.WIDTH/2, this.sizes.WIDTH/2 +1, this.sizes.WIDTH/2, 0, Math.PI, true);
        context.fill();
        context.stroke();
        // body
        context.moveTo(this.sizes.OFFSET, y);
        context.lineTo(this.sizes.OFFSET,                          y + this.sizes.HEIGHT_BODY);
        context.lineTo(this.sizes.OFFSET + x , y + this.sizes.HEIGHT_BODY + this.sizes.HEIGHT_BOTTOM);
        context.lineTo(this.sizes.OFFSET + this.sizes.WIDTH,       y + this.sizes.HEIGHT_BODY);
        context.lineTo(this.sizes.OFFSET + this.sizes.WIDTH,       y);
        context.strokeStyle = "black";
        context.fill();
        context.stroke();

        if (this.type == 'fermentacion') {
            this.drawCrossLine(1, 'blue');
            this.drawCrossLine(2, 'blue');
            this.drawCrossLine(3, 'blue');
            this.unifyLines(3, 'blue');
        }

    },

    drawCrossLine: function(lineNumber, color) {
        var ctx = this.element[0].getContext('2d');
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.fill();
        ctx.fillRect(0, lineNumber * this.sizes.HEIGHT_TOTAL/4 +10,this.sizes.WIDTH*2,3);
        ctx.stroke();

        ctx.save();
        ctx.beginPath();
        ctx.rotate(10*Math.PI/180);
        ctx.fillRect(0, lineNumber * this.sizes.HEIGHT_TOTAL/4 +10,this.sizes.WIDTH*1.5,3);
        ctx.stroke();
        ctx.restore();
    },

    unifyLines: function(lineCounter, color) {
        var ctx = this.element[0].getContext('2d');
        ctx.beginPath();
        ctx.fillStyle = color;
        ctx.fill();
        ctx.fillRect(this.sizes.WIDTH*2, this.sizes.HEIGHT_TOTAL/4 +10,3, lineCounter * this.sizes.HEIGHT_TOTAL/4 - this.sizes.HEIGHT_TOTAL/4 +3);
        ctx.stroke();

    },

    _createGradient: function(context) {
        var grd = context.createLinearGradient(10,0,85,10);
        grd.addColorStop(0,"white");
        grd.addColorStop(1, 'black');
        return grd;
    },

    _parseType: function(type) {
        if (type == 'fermentacion') {
            this.sizes = figure.tankFermSizes;
        } else if (type == 'maduracion'){
            this.sizes = figure.tankMadurSizes;
        } else {
            throw new Error('fermentacion o maduracion tiene que ser el type');
        }
    }

});